<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>
        <label>Name:
            <input type="text" v-model="name">
        </label>
        <input type="button" @click="add"value="增加">
    </div>
    <!--  指定好元素 避免被修改 key属性只能使用number和string类型-->
    <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{ item.id }}---{{ item.name }}
    </p>

</div>
<script>
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
           list: [
               {id:1,name:'李斯'},
               {id:2,name:'嬴政'},
               {id:3,name:'赵高'},
               {id:4,name:'韩非'},
               {id:5,name:'荀子'},
           ]
        },
        methods:{
            add() {
                this.list.unshift({id:this.id,name:this.name})
            }

        }
    })
</script>
</body>
</html>
